<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/sty.css" />
    <link rel="stylesheet" href="css/bootstrap.css" />
    <script src="./js/bootstrap.bundle.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div class="container" style="display: flex;justify-content: space-around;">

    <div class="motai">
      <!-- Button trigger modal -->
      <img
        src="img/assistant-manager.jpg"
        type="button"
       
        data-bs-toggle="modal"
        data-bs-target="#exampleModal1"
      >
      </img>
      <div class="wenzi">
        COOK
      </div>

      <!-- Modal -->
      <div
        class="modal fade"
        id="exampleModal1"
        tabindex="-1"
      >
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <div class="modal-body">1111</div>
            <div class="modal-footer">
              <button
                
                type="button"
                class="btn btn-secondary"
                data-bs-dismiss="modal"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="motai">
      <!-- Button trigger modal -->
      <img
        src="img/cook.jpg"
        type="button"
       
        data-bs-toggle="modal"
        data-bs-target="#exampleModal2"
      >
      </img>
      <div class="wenzi">
        COOK
      </div>

      <!-- Modal -->
      <div
        class="modal fade"
        id="exampleModal2"
        tabindex="-1"
      >
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <div class="modal-body">2222</div>
            <div class="modal-footer">
              <button
                
                type="button"
                class="btn btn-secondary"
                data-bs-dismiss="modal"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="motai">
      <!-- Button trigger modal -->
      <img
        src="img/kfc_customer_sevice.jpg"
        type="button"
       
        data-bs-toggle="modal"
        data-bs-target="#exampleModal3"
      >
      </img>
      <div class="wenzi">
        COOK
      </div>

      <!-- Modal -->
      <div
        class="modal fade"
        id="exampleModal3"
        tabindex="-1"
      >
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <div class="modal-body">33333</div>
            <div class="modal-footer">
              <button
                
                type="button"
                class="btn btn-secondary"
                data-bs-dismiss="modal"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    </div>
  </body>
</html>

<!-- food 
    <div id="vuebox">
        <h3>{{big}}</h3>
        <div class="bigbox">
            <div class="food fd1" :class="{active : big == 0 }">
                <div>
                    <img src="./img/kfc-AlcChLtl.png">
                    <h3>$8.50</h3>
                </div>
                <div>
                    <img src="./img/kfc-cknsndalc.png">
                    <h3>$8.50</h3>
                </div>
                <div>
                    <img src="./img/kfc-cknsndcombo.png">
                    <h3>$8.50</h3>
                </div>
                <div>
                    <img src="./img/kfc-ChLtlCombo.png">
                    <h3>$8.50</h3>
                </div>
                <div>
                    <img src="./img/kfc-AlcChLtl.png">
                    <h3>$8.50</h3>
                </div>
                <div>
                    <img src="./img/kfc-cknsndalc.png">
                    <h3>$8.50</h3>
                </div>
                <div>
                    <img src="./img/kfc-cknsndcombo.png">
                    <h3>$8.50</h3>
                </div>
                <div>
                    <img src="./img/kfc-ChLtlCombo.png">
                    <h3>$8.50</h3>
                </div>
            </div>
            <div class="food fd2" :class="{active : big == 1  }">
                <div>
                    <img src="./img/kfc-new16pcTenders.png">
                    <h3>$8.50</h3>
                </div>
                <div>
                    <img src="./img/kfc-IndFries.png">
                    <h3>$8.50</h3>
                </div>
                <div>
                    <img src="./img/kfc-24WingsUnsauced.png">
                    <h3>$8.50</h3>
                </div>
                <div>
                    <img src="./img/kfc-PopcornComboFries.png">
                    <h3>$8.50</h3>
                </div>
                
            </div>
            <div class="food fd3" :class="{active : big == 2  }">
                <div>
                    <img src="./img/kfc-AlcThigh.png">
                    <h3>$8.50</h3>
                </div>
                <div>
                    <img src="./img/kfc-AlcBreast.png">
                    <h3>$8.50</h3>
                </div>
                <div>
                    <img src="./img/kfc-AlcLeg.png">
                    <h3>$8.50</h3>
                </div>
                <div>
                    <img src="./img/kfc-AlcTender2.png">
                    <h3>$8.50</h3>
                </div>
            </div>
            <div class="food fd4" :class="{active : big == 3  }">
                <div>
                    <img src="./img/kfc-Pepsi.png">
                    <h3>$8.50</h3>
                </div>
                <div>
                    <img src="./img/kfc-sierramist.png">
                    <h3>$8.50</h3>
                </div>
                <div>
                    <img src="./img/kfc-mtndew.png">
                    <h3>$8.50</h3>
                </div>
                <div>
                    <img src="./img/kfc-sweetTea.png">
                    <h3>$8.50</h3>
                </div>
            </div>
            <div class="food fd5" :class="{active : big == 4  }">
                <div>
                    <img src="./img/kfc-FamousBowl.png">
                    <h3>$8.50</h3>
                </div>
                <div>
                    <img src="./img/kfc-IndColeslaw.png">
                    <h3>$8.50</h3>
                </div>
                <div>
                    <img src="./img/kfc-IndMacCheese.png">
                    <h3>$8.50</h3>
                </div>
                <div>
                    <img src="./img/kfc-IndMashGravy.png">
                    <h3>$8.50</h3>
                </div>
            </div>
        </div>  

        <div class="smallbox">
            <div @mouseover="big=0" :class="{active : big == 0 }">
                <img src="./img/icon_kfc_top.svg" :class="{active : big == 0 }">
                <h2>汉堡</h2>
            </div>
            <div @mouseover="big=1" :class="{active : big == 1 }">
                <img src="./img/icon_kfc_top.svg" :class="{active : big == 1 }">
                <h2>小食</h2>
            </div>
            <div @mouseover="big=2" :class="{active : big == 2 }">
                <img src="./img/icon_kfc_top.svg" :class="{active : big == 2 }">
                <h2>炸鸡</h2>
            </div>
            <div @mouseover="big=3" :class="{active : big == 3 }">
                <img src="./img/icon_kfc_top.svg" :class="{active : big == 3 }">
                <h2>饮料</h2>
            </div>
            <div @mouseover="big=4" :class="{active : big == 4 }">
                <img src="./img/icon_kfc_top.svg" :class="{active : big == 4 }">
                <h2>健康</h2>
            </div>
        </div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el:'#vuebox',
            //把dom中会变化的数据存储在data里
            data:{
                big:0
            }
        })
    </script>
    -->

<!-- 购物车 -->
<!-- <div>
      <table id="shop">
        <thead>
          <tr>
            <td>
              <label>
                <input
                  @change="checkAll"
                  type="checkbox"
                  :checked="isCheckAll"
                />全选
              </label>
            </td>
            <td>样品</td>
            <td>名字</td>
            <td>价格</td>
            <td>数量</td>
            <td>小计</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="pro in products">
            <td>
              <input v-model="pro.checked" type="checkbox" />
            </td>
            <td><img :src="`./img/${pro.img}`" style="width: 100px" /></td>
            <td>{{ pro.name }}</td>
            <td>{{ pro.price }}</td>
            <td>
              <button @click="pro.count--" :disabled="pro.count == 0">-</button>
              <span>{{ pro.count }}</span>
              <button @click="pro.count++">+</button>
            </td>
            <td>{{ pro.count * pro.price }}</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="6">已购买:{{ pro.name }}</td>
          </tr>
          <tr>
            <td colspan="6">合计:{{ getTotal }}</td>
          </tr>
        </tfoot>
      </table>
    </div> -->
